<template>
	<view class="box bg-f7 padding-30">
		<view v-for="item in list" class="bg-white padding-20 border-radio-20 margin-b-20">
		     <view class="align-items-center margin-b-20">
				 <view class="avatar-box">
					 <image :src="BASE_URL + item.images" mode="aspectFill"></image>
				 </view>
				 <view class="flex-1 margin-l-20">
					 <view class="name fs-28 fw-b color-0">{{item.name}}</view>
					 <view class="fs20 color-4d">从业{{item.work_year}}年</view>
				 </view>
				 <view class="btn-box bg-43 color-white fs-24">立即预约</view>
			 </view>
			 <view class="content fs-24 color-4d only-1">{{item.content}}</view>
			 <view class="design-list align-items-center margin-t-20">
				 <view v-for="(e,i) in item.designList" class="design-img border-radio-20" :class="{' margin-l-20' :i}" :key="i">
					 <image :src="e" mode="aspectFill"></image>
				 </view>
			 </view>
		</view>
	</view>
</template>

<script>
import  { decorationList }  from  "@/api/elderlySuitable"
import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
	export default {

		data() {
			return {
				list:[ 	],
                page:1,
                BASE_URL,
				isMore:true
			}
		},
        onLoad() {
        	this.init()
        },
        
        //上拉加载函数
        onReachBottom() { 
        	if (this.isMore) {
        		setTimeout(() => {
        			this.getList()
        		}, 100)
        	} else {
        		uni.showToast({
        			title: '暂无更多',
        			icon: 'none'
        		})
        	}
        
        },
        onPullDownRefresh() {
        	//刷新初始化数据
        	this.init()
        	//关闭刷新动画
        	setTimeout(function() {
        		uni.stopPullDownRefresh()
        	}, 1000)
        },
		methods: {
			init(){
				this.page =1 
				this.list = []
				this.getList()
			},
			getList(){
                let params = {
                    page: this.page,
                    limit: 10,
                    type:1
                }
                decorationList(params).then(res=>{
                    if (res.code == 1){
                        this.list = this.list.concat( res.data)
						if(res.data && res.data.length> 9){
							this.isMore= true
						}else{
							this.isMore= false
						}
                    }else {
                        uni.showToast({
                            icon:'none',
                            title:res.msg
                        })
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-box {
		width: 88rpx;
		height: 88rpx;
		overflow: hidden;
        border-radius: 44rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.btn-box {
		width: 130rpx;
		height: 46rpx;
		border-radius: 23rpx;
		text-align: center;
		line-height: 46rpx;
	}
	.design-img {
		width: 200rpx;
		height: 200rpx;
		min-width: 200rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
